<template>
  <text class="sub-title"> — 查看选课信息 </text>
  <title1></title1>
  <Navigation></Navigation>
  <el-container style="position: fixed; top: 120px; left: 500px;">
    <el-text style="margin-left: 30px">课程学年学期:</el-text>
    <el-tree-select
        v-model="sel_cyear"
        :data="cyear"
        :render-after-expand="false"
        style="width: 180px; margin-left: 10px"
    />
    <el-text style="margin-left: 30px">课程类型:</el-text>
    <el-tree-select
        v-model="sel_ctype"
        :data="ctype"
        :render-after-expand="false"
        style="width: 180px; margin-left: 10px"
    />
    <el-button plain @click="submit" style="margin-left: 50px">
      查询
    </el-button>
  </el-container>
  <el-table :data="tableData" class="xktable" border style="width: 75%">
    <el-table-column
        type="index"
        label="序号"
        width="60"
        align="center"
    ></el-table-column>
    <el-table-column
        v-for="column in columns"
        :key="column.prop"
        :prop="column.prop"
        :label="column.label"
        :min-width="column.minWidth"
        :align="column.align"
        :show-overflow-tooltip="column.showOverflowTooltip"
        :formatter="column.formatter"
    ></el-table-column>
  </el-table>
</template>

<script>
import title1 from '../components/title.vue';
import Navigation from "../components/navigation_stu.vue";
import { ref } from 'vue';
import axios from "axios";
import { ElMessage } from "element-plus";

const ctype = [
  {
    value: '1',
    label: '基础课',
  },
  {
    value: '2',
    label: '专业课',
  },
  {
    value: '3',
    label: '通识课',
  },
];

const cyear = [
  {
    value: '24年秋',
    label: '24秋',
  },
  {
    value: '24年春',
    label: '24春',
  },
  {
    value: '23年秋',
    label: '23秋',
  },
  {
    value: '23年春',
    label: '23春',
  },
  {
    value: '22年秋',
    label: '22秋',
  },
  {
    value: '22年春',
    label: '22春',
  },
];

export default {
  name: 'HomeForStu',
  components: {
    title1,
    Navigation
  },
  data() {
    return {
      dialogVisible: false,
      tableData: [],
      cyear,
      ctype,
      sel_cyear: '',
      sel_ctype: '',
      columns: [
        { prop: 'c_no', label: '课程号', minWidth: '80px', align: 'center', showOverflowTooltip: true },
        { prop: 'c_name', label: '课程名', minWidth: '80px', align: 'center', showOverflowTooltip: true },
        { prop: 'c_credit', label: '学分', minWidth: '80px', align: 'center', showOverflowTooltip: true },
        { prop: 't_name', label: '授课教师', minWidth: '80px', align: 'center', showOverflowTooltip: true },
        { prop: 'c_time', label: '上课时间', minWidth: '100px', align: 'center', showOverflowTooltip: true, formatter: this.formatCourseList },
        { prop: 'c_address', label: '上课地点', minWidth: '100px', align: 'center', showOverflowTooltip: true },
        { prop: 'c_count', label: '限选人数', minWidth: '80px', align: 'center' },
      ],
    };
  },
  mounted() {
    document.title = '学生信息管理系统'; // 动态设置页面标题
    const token = localStorage.getItem('token'); // 确保 token 已正确存储
    const userNo = sessionStorage.getItem('UserNo'); // 确保 UserNo 已正确存储
    if (!token || !userNo) {
      alert('缺少必要的认证信息，请重新登录。');
      this.$router.push({ name: "Login" });
    }
  },
  methods: {
    async submit() {
      try {
        const token = localStorage.getItem('token'); // 确保 token 已正确存储
        const userNo = sessionStorage.getItem('UserNo'); // 确保 UserNo 已正确存储
        if (!token || !userNo) {
          alert('缺少必要的认证信息，请重新登录。');
          await this.$router.push({ name: "Login" });
          return;
        }
        const selectedCtype = String(this.ctype.find(item => item.value === this.sel_ctype)?.value);
        const selectedCyear = String(this.cyear.find(item => item.value === this.sel_cyear)?.value);
        console.log(selectedCtype, selectedCyear,userNo,token)
        const response = await axios.post(`${import.meta.env.VITE_API_BASE_URL}/student/showOptionalCourse`, {
          selSno: userNo,
          selCtype: selectedCtype,
          selCyear: selectedCyear,
        }, {
          headers: {
            token: token,
            'Content-Type': 'application/json'
          },
        });
        console.log(response.data.code)
        if (response.data.code === '200') {
          ElMessage({
            message: '查询成功',
            type: 'success',
          });
          const coursesDict = response.data.data;
          this.tableData = Object.values(coursesDict);
          console.log(this.tableData)
        } else {
          ElMessage({
            message: '查询出错，请检查是否选定了时间和类型 或 是否有课程',
            type: 'error',
          });
        }
      } catch (error) {
        console.error('查询失败', error);
        alert('查询出错，请稍后再试');
      }
    },
    formatCourseList(row, column, cellValue) {
      if (Array.isArray(cellValue)) {
        return cellValue.join(', '); // 将数组转换为逗号分隔的字符串
      }
      return cellValue;
    }
  },
  mounted() {
    document.title = '学生信息管理系统'; // 动态设置页面标题
  },

}
</script>

<style scoped>
.xktable {
  position: fixed;
  top: 200px;
  left: 280px;
}

.sub-title {
  z-index: 2;
  position: fixed;
  top: 35px;
  left: 380px;
  color: #0e4bbd;
  font-size: 30px;
  font-weight: normal;
}
</style>
